<template>
  <div class="login">
    <header-top>
      <a class="header_left" slot="left" @click="$router.back()">
        <img src="../../assets/images/icon_fanhui.png" style="width: 12px; height: 20px;"/>
      </a>
      <a class="header_center" slot="center">
        <span>登陆</span>
      </a>
      <router-link class="header_right" slot="right" to="/register/new">
        <span>注册</span>
      </router-link>
    </header-top>
    <div class="login-content">
      <div class="login-input-box">
        <div class="login-input login-input-phone" ref="phone">
          <img src="./images/icon_zhanghao.png"/>
          <input type="text" placeholder="手机号" v-model="phone" @focus='phoneFocus' @blur="phoneBlur"/>
          <img class="delIcon" src="../../assets/images/icon_del.png" @click.stop="phone=''"
               v-show="(phone=='' || !phoneInput)? false: true"/>
        </div>
        <p class="line" v-show="loginInputHr"/>
        <div class="login-input login-input-password" ref="password">
          <img src="./images/icon_mima.png"/>
          <input type="password" placeholder="密码" v-model="password" @focus='passwordFocus' @blur="passwordBlur"/>
          <img class="delIcon" src="../../assets/images/icon_del.png" @click.stop="password=''"
               v-show="(password=='' || !passwordInput)? false: true"/>
        </div>
      </div>
      <div class="login-forget" @click="$router.push('/register/old')">
        找回密码
      </div>
      <div class="login-footer">
        <div>
          <x-button type="primary" :disabled="btnLogin" @click.native="login">登陆</x-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import HeaderTop from '../../components/HeaderTop/HeaderTop'
  import {XButton} from 'vux'

  export default {
    name: "Login",
    components: {
      HeaderTop,
      XButton
    },
    data() {
      return {
        phone: '',
        password: '',
        loginInputHr: true,
        phoneInput: false,
        passwordInput: false
      }
    },
    methods: {
      login() {
        const {phone, password} = this;
        console.log({phone, password});
      },
      phoneFocus() {
        let phoneRef = this.$refs.phone;
        phoneRef.style.borderBottom = '1px solid #ffdccd';
        phoneRef.style.borderColor = '#ff6633';
        this.loginInputHr = false;
        this.phoneInput = true;
      },
      phoneBlur() {
        let phoneRef = this.$refs.phone;
        phoneRef.style.borderBottom = 'none';
        phoneRef.style.borderColor = '#ffdccd';
        this.loginInputHr = true;
        setTimeout(() => this.phoneInput = false, 100);
      },
      passwordFocus() {
        let passwordRef = this.$refs.password;
        passwordRef.style.borderTop = '1px solid #ffdccd';
        passwordRef.style.borderColor = '#ff6633';
        this.loginInputHr = false;
        this.passwordInput = true;
      },
      passwordBlur() {
        let passwordRef = this.$refs.password;
        passwordRef.style.borderTop = 'none';
        passwordRef.style.borderColor = '#ffdccd';
        this.loginInputHr = true;
        setTimeout(() => this.passwordInput = false, 100);
      }
    },
    computed: {
      btnLogin() {
        let {phone, password} = this;
        if (phone && password) {
          return false;
        } else {
          return true;
        }
      }
    }
  }
</script>

<style scoped>
  .login {
    overflow-y: hidden;
  }

  .login-input-box {
    background-color: #fff;
    margin: 25px;
    margin-top: 73px;
  }

  .login-input {
    border: 1px solid #ffdccd;
    background-color: #fff;
  }

  .login-input-phone {
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-bottom: none;
  }

  .login-input-password {
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    border-top: none;
  }

  .login-input img {
    width: 24px;
    height: 24px;
    margin: 12px;
    float: left;
    position: absolute;
  }

  .delIcon {
    right: 28px;
  }

  input {
    width: 75%;
    height: 48px;
    border: none;
    font-size: 14px;
    padding-left: 48px;
  }

  input:hover {
    border: none;
    outline: none;
  }

  input:focus {
    outline: none;
  }

  .login-forget {
    margin: 25px;
    margin-top: -10px;
    color: #f63;
    font-size: 15px;
  }

  .login-footer div {
    margin: 25px;
    height: 48px;
    line-height: 48px;
    margin-top: -10px;
    color: #fff;
    font-size: 15px;
    text-align: center;
    border-radius: 3px;
  }

</style>
